<?
//////////// Example of use:

//chose a name for the callback javascript function
/// if you use several colpicker in the same page, use also several names




// the crteate the javascript function which will recieve the value
/// this function may for example fill the form value with the returned color
//uncomment bellow
/*

<?

?>
create_colPicker( "myInput" );
?>
<script>
function myInput( col ){ 
	alert( col );
}
</script>
<?

////////////////// end of example of use
//uncomment also here:
*/


function create_colPicker( $U , $IniCol , $config ){

$ConfigS[1] = Array(
// the green level
'Table1' => Array( 
		'height' => 90,
		'width' => 18,
		'marginBottomScale' => 7,
		'heightSelected' => 140,
		'tableHeight' => 140
		),

// tables of red/blue level ( 8 * 8 ), 8 tables
'Table2' => Array( 
		'tableHeight' => 140,
		'cellHeight' => 22,
		'cellWidth' => 22
		
		),

// selected color preview
'a_preview' => Array(
		'height' => 160,
		'width' => 30,
		'border' => 15
		
)
);


$ConfigS[2] = Array(
// the green level
'Table1' => Array( 
		'height' => 20,
		'width' =>4,
		'marginBottomScale' => 3,
		'heightSelected' => 50,
		'tableHeight' =>50
		),

// tables of red/blue level ( 8 * 8 ), 8 tables
'Table2' => Array( 
		'tableHeight' => 50,
		'cellHeight' => 6,
		'cellWidth' => 6
		
		),

// selected color preview
'a_preview' => Array(
		'height' => 40,
		'width' => 10,
		'border' => 5
)

);

if( $config != 2 )
	$config=1;

$Config = $ConfigS[ $config ];



// $U is a unique identifier in case there are more than one color picker in a page.
// $U is also nthe "callback" function. at the end of the javascript process, the $U() javascript function is called
//echo "<b>".$IniCol."</b><hr>";

if( !preg_match( "/rgb/" , $IniCol ) )
	$IniCol = "rgb( 3,3,3)";

$IniCol =  preg_replace( "/\(/","", preg_replace( "/\)/","",  preg_replace( "/rgb/" , '' , $IniCol )));
//echo $IniCol;
list(  $IniRedCol ,$IniGreenCol , $IniBlueCol ) = explode( "," , $IniCol );
$IniGreen = floor( ( $IniGreenCol - 3 ) / 36 );
$IniRed = floor( ( $IniRedCol - 3 ) / 36 );
$IniBlue = floor( ( $IniBlueCol - 3 ) / 36 );

//makimng inicolor an existing color in the tables ( round 1/36 )
$IniRedCol = $IniRed * 36 + 3;
$IniGreenCol = $IniGreenCol * 36 + 3;
$IniBlueCol = $IniBlueCol * 36 + 3;

?>
<style>
#table1_<? echo $U  ?>{
	float:left;
	margin-right:0px;
	height:<? echo $Config[ 'Table1' ][ 'tableHeight' ] ?>px;

}
#table1_<? echo $U  ?> td{

	vertical-align:bottom;

}
#table1_<? echo $U  ?> td a{
	display:block;
	width:<? echo $Config[ 'Table1' ][ 'width' ] ?>px;
	border:1px solid green;

	
	

}
#table1_<? echo $U  ?> td a:hover{
	border-color:red !important;
	height:100% !important;
	margin-bottom:0px !important;
}
	
#a_<? echo $U ?>{
	display:block;
	width:<? echo $Config[ 'a_preview' ][ 'width' ] ?>px;
	Height:<? echo $Config[ 'a_preview' ][ 'height' ] ?>px;
	background:#eeeeee;
	border:<? echo $Config[ 'a_preview' ][ 'border' ] ?>px solid #eee;
	float:left;
}	
#a_<? echo $U ?>:hover{
	<?
	$hover_width = floor( $Config[ 'a_preview' ][ 'border' ] / 2 );
	?>
	border-style:dashed !important;
	border-width:<? echo $hover_width ?>px !important;
	margin:<? echo ($Config[ 'a_preview' ][ 'border' ] - $hover_width) ?>px;
	
}	
#a_<? echo $U ?>:active{
	border:<? echo $hover_width ?>px dashed red !important;
	margin:<? echo ($Config[ 'a_preview' ][ 'border' ] - $hover_width) ?>px;
}
#div_table2_<? echo $U ?>{

}
#div_table2_<? echo $U ?> table{
	display:none;
}

#div_table2_<? echo $U ?> table td a{
	display:block;
	width:<? echo $Config[ 'Table2' ][ 'cellWidth' ] ?>px;
	border:1px solid green;
	height:<? echo $Config[ 'Table2' ][ 'cellHeight' ] ?>px;
}
#div_table2_<? echo $U ?> table td a:hover{
	border-color:red !important;
}
#div_table2_<? echo $U ?>{
	
}


</style>
<script>


//var LockCase = '<? echo "rgb(".$IniRedCol.",".$IniGreenCol.",".$IniBlueCol.")" ?>';

function aff_green_<? echo $U ?>( i ){
	
	for( ii=0;ii<8;ii++){
		document.getElementById( "a_<? echo $U."_"; ?>"+ii ).style.height=<? echo $Config[ 'Table1' ][ 'height' ] ?> + "px";
		document.getElementById( "a_<? echo $U."_"; ?>"+ii ).style.marginBottom= ii * <? echo $Config[ 'Table1' ][ 'marginBottomScale' ] ?> + "px";
		document.getElementById( "table2_<? echo $U."_" ?>"+ii ).style.display = 'none';
		
		
	}
	document.getElementById( "a_<? echo $U."_"; ?>"+i ).style.height='100%';
	document.getElementById( "a_<? echo $U."_"; ?>"+i ).style.marginBottom=0;
	document.getElementById( "table2_<? echo $U."_" ?>"+i ).style.display = 'block';
	
	

}
function aff_RGB_<? echo $U ?>( R , G , B ){
	//alert( col );
	//alert( R + " " +G + " " + B )
	
	document.getElementById( "a_<? echo $U ?>" ).style.backgroundColor="rgb("+R+","+G+","+B+")";
	document.getElementById( "a_<? echo $U ?>" ).style.borderColor="rgb("+R+","+G+","+B+")";
	
	
}
</script>

<table id=table_<? echo $U ?>  border=0 >

<tr><td>
	<table id=table1_<? echo $U ?> cellspacing=0 cellpadding=0  border=0  >
		<tr>
		<?
		$bckIniCol='';
		$tables2 = "<div id=div_table2_".$U." >";
		for( $i = 0; $i < 8 ; $i++ ){
			$colGreen = $i * 36 + 3;
			//$colGreen = floor( 5.2 * $i * $i );
			
			
			/// interpolation with a parabole:
			
			
			
			
			$col="rgb(0,".$colGreen.",0)";
			$margin_bottom = $i * $Config[ 'Table1' ][ 'marginBottomScale' ];
			$height = $Config[ 'Table1' ][ 'height' ].'px';
			$table2Display='none';
			$isGreenIni='';
			if( $i == $IniGreen ){
				$margin_bottom = 0;
				$height = '100%';
				$table2Display='block';
				$isGreenIni=1;
			}
			
			
			?>
			<td>
				<a id=a_<? echo $U."_".$i ?> style="background:<? echo $col ?>;border-color:<? echo $col ?>;margin-bottom:<? echo $margin_bottom ?>px;height:<? echo $height ?>" href='#' 
					onclick="aff_green_<? echo $U ?>( <? echo $i ?> );return false;" 
					
					>
				</a>
			</td>
				
				
			<?
			//////////////////////////////for each table1 cols we create one table with red and blue colors:
			$tables2 .= "<table id=table2_".$U."_".$i." cellspacing=0 cellpadding=0 style='display:".$table2Display."' >";
			for( $j=0;$j<8;$j++){
				$isRedIni='';
				if( $j == $IniRed )
					$isRedIni = 1;
				
				
				$colRed = $j * 36 + 3;
				$tables2 .= "<tr>";
					for( $k=0;$k<8;$k++){
						
						
							
						$colBlue = $k * 36 + 3;
						$col="rgb(".$colRed.",".$colGreen.",".$colBlue.")";
						$bcol = $col;
						if( $isGreenIni==1 && $isRedIni == 1 )
							if( $k == $IniBlue ){
								$bckIniCol=$col;
								//$bcol="red";
							}
						
						
						$tables2 .= "<td>
							<a style='background:".$col.";border-color:".$bcol."' href='#' 
							onclick=\"aff_RGB_".$U."(".$colRed.",".$colGreen.",".$colBlue.");return false;\" 
							onmouseover=\"document.getElementById( 'a_".$U."' ).style.borderColor='".$col."'\" 
							>
							</a>
							</td>";
					}
				$tables2 .= "</tr>";
			}
			
			$tables2 .= "</table>";
			
		}
		$tables2 .= "</div>";
		?>
		</tr>
	
	
	
	</table >
	</td>
	<td style="background:#eee" align=center>
	
	<? echo $tables2 ?>
	
	</td>
	<td align=center valign=center style="background:#eee"  style="text-align:center"
	width="<? echo $Config[ 'a_preview' ][ 'width' ] + 2 * $Config[ 'a_preview' ][ 'border' ] ?>px" 
	>

	<a id=a_<? echo $U ?>
		style="background:<? echo $bckIniCol ?>"
		onclick="var sdf=document.getElementById( 'a_<? echo $U ?>'  ).style.backgroundColor;<? echo $U ?>( sdf )"
		onmouseover=""
	>
	</a>
	
	</td>
	</tr>

</table>

<?

}
?>















